
// 获取session中的用户id
var cusId = sessionStorage.getItem("cusid");

// var orderlist = new Array;
//页面加载时调用全部订单的获取方法
$(function() {
    initData();


});

//==========================1=========================
// 当点击订单模块上的选项时：
// （全部订单，有效订单，近一个月。。。。），
// 字体样式改变

$(".order_list_nav_ul").find("a").click(function () {
    $(".order_list_nav_ul a").parent().removeClass("mouse_on");
    $(this).parent().addClass("mouse_on");
});
// 向后端发送ajax请求
// 。。。暂不写


//==========================2=========================
//点击查看详情进入订单详情页
function goOrderDetail(event) {
    var eve = event.target;

    var orderId = $(eve).parent().next().text();
    var proId = $(eve).parent().next().next().text();
    window.sessionStorage.setItem("orderid",orderId);
    window.sessionStorage.setItem("proid",proId);
    $(location).attr('href', 'order/detail');
}

//==========================4=========================
//全部订单的获取方法
//发送ajax请求 获得订单返回数据
//渲染

function initData() {

    var sendUrl = "/order/customer/" + cusId;
    console.log(sendUrl);

    $.ajax({
        url : sendUrl,
        type : "GET",
        datatype : "json",
        success : function(data) {
            console.log(data);
            var orderlist = data.data;

            console.log(orderlist.length);

            // console.log("订单"+orderlist[0][0]);

            //清空分页插件div和订单列表div里的内容
            $(".order_lists").empty();
            $("#page").empty();

            //重新导入分页插件
            layui.use('laypage', function(){
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: orderlist.length //数据总数，从服务端得到
                    ,limit: 3  //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    , curr: 1
                    // , first: 1
                    ,layout: ['prev', 'page', 'next','count']
                    ,jump: function(obj,first){

                        $(".order_lists").empty();

                        console.log("分页成功");
                        var pageCount = obj.count; //总页数
                        var pageNo = obj.curr;  //当前页数
                        var evePageCount = obj.limit; //每页数量

                        var finalCount; //末值区间

                        if (pageNo * evePageCount >= pageCount) {
                            finalCount = pageCount;
                        } else {
                            finalCount = pageNo*evePageCount;
                        }

                        for (var i = (pageNo-1)*evePageCount; i< finalCount;i++){
                            var mypro = orderlist[i].product1;
                            var myorder = orderlist[i].order1;
                            
                            var orderStatus;
                            if (myorder.status == "1"){
                                orderStatus = "已生效"
                            } else {
                                orderStatus = "已失效"
                            }
                            //开始渲染
                            $(".order_lists").append(

                                "  <div class=\"order_single\">\n" +
                                "                                <!--订单头：包含订单号，订单生成时间等-->\n" +
                                "                                <div class=\"order_header\">\n" +
                                "                                    <span class=\"order_id\">" + myorder.orderNo + "</span>\n" +
                                "                                    <span>|</span>\n" +
                                "                                    <span class=\"order_time\">" + myorder.startdate + "</span>\n" +
                                "                                </div>\n" +
                                "                                <!--订单主体-->\n" +
                                "                                <div class=\"single_order_table\">\n" +
                                "                                    <!--包含旅游产品图片和名称的div-->\n" +
                                "                                    <div class=\"order_product\">\n" +
                                "                                        <ul>\n" +
                                "                                            <li class=\"ord_img_li\">\n" +
                                "                                                <img src ='" + mypro.previewImg + "' alt=\"\">\n" +
                                "                                            </li>\n" +
                                "                                            <li class=\"ord_name_li\">\n" +
                                "                                               <span class=\"name\">" + mypro.productName + "</span>\n" +
                                "\n" +
                                "                                            </li>\n" +
                                "                                            <li class=\"ord_price_li\">\n" +
                                "                                                <div>\n" +
                                "                                                    <span>￥</span>\n" +
                                "                                                    <span class=\"price\">" + myorder.orderMoney + "</span>\n" +
                                "                                                </div>\n" +
                                "                                            </li>\n" +
                                "                                            <li class=\"ord_status_li\">\n" +
                                "                                               <span class=\"status\">\n" +
                                                                                    myorder.orderStatus +
                                "                                               </span>\n" +
                                "                                            </li>\n" +
                                "                                            <li class=\"ord_detail_li\">\n" +
                                "                                                <a href=\"javascript:void(0);\" onclick='goOrderDetail(event)'>\n" +
                                "                                                   <span>\n" +
                                "                                                       查看详情\n" +
                                "                                                   </span>\n" +
                                "                                                </a>\n" +
                                "                                                <span  class=\"orderId idipt\" name=\"orderId\">" + myorder.id + "</span>\n" +
                                "                                                <span  class=\"proId idipt\" name=\"proId\">" + mypro.id+"</span>\n" +
                                "                                            </li>\n" +
                                "                                        </ul>\n" +
                                "                                    </div>\n" +
                                "                                </div>\n" +
                                "                            </div>"

                                // `
                            //     <!--测试：这是一个单个订单，先看下效果，后面由js循环添加-->
                            // <div class="order_single">
                            //     <!--订单头：包含订单号，订单生成时间等-->
                            //     <div class="order_header">
                            //         <span class="order_id">myorder.orderNo</span>
                            //         <span>|</span>
                            //         <span class="order_time">myorder.startdate</span>
                            //     </div>
                            //     <!--订单主体-->
                            //     <div class="single_order_table">
                            //         <!--包含旅游产品图片和名称的div-->
                            //         <div class="order_product">
                            //             <ul>
                            //                 <li class="ord_img_li">
                            //                     <!--<img src="/images/xhbtest1.png" alt=""> -->
                            //                 </li>
                            //                 <li class="ord_name_li">
                            //                     <span class="name">
                            //                         mypro.productName
                            //                     </span>
                            //
                            //                 </li>
                            //                 <li class="ord_price_li">
                            //                     <div>
                            //                         <span>￥</span>
                            //                         <span class="price">myorder.orderMoney</span>
                            //                     </div>
                            //                 </li>
                            //                 <li class="ord_status_li">
                            //                    <span class="status">
                            //                        orderStatus
                            //                    </span>
                            //                 </li>
                            //                 <li class="ord_detail_li">
                            //                     <a href="">
                            //                        <span>
                            //                            查看详情
                            //                        </span>
                            //                     </a>
                            //                     <span type="text" class="orderId idipt" name="orderId">myorder.id</span>
                            //                     <span type="text" class="proId idipt" name="proId">mypro.id</span>
                            //                 </li>
                            //             </ul>
                            //         </div>
                            //     </div>
                            // </div>

                                // `
                            )

                        }

                    }
                });
            });

        }
    })

}

//点击名称进入首页
$(".nav_userName").click(function () {

    $.ajax({
        url: "/order/getId",
        type: "GET",
        datatype: "json",
        success: function (data) {
            console.log(data.data)
            window.sessionStorage.setItem("cusid", data.data)
            $(location).attr('href', 'order');
        }

    })

})





